<template>
  <div style="overflow-y:hidden;background:white;">
    <div class="bgPrintDataBoxPa">
      <el-form id="uploadFile" class="text-center" size="mini">
        <el-form-item>
          <div class="printLabel-top">
            <span class="wujiayuan">
              <label>物价员：</label>
              <input name="person" v-model="personName" />
            </span>
            <span class="printBtn">
              <el-button type="success" @click="startPrint">开始打印</el-button>
            </span>
          </div>
        </el-form-item>
      </el-form>
      <div class="bgPrintDataBox"></div>
      <div class="printDataHtml2"></div>
      <div class="printDataHtml printDataHtmlBox" v-cloak>
        <div class="print_label_data">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always;">
            <tbody>
              <tr v-for="(item1, index1) in newPrintData" :key="index1"
                :style="{'marginTop': (index1 != 0 && index1%7 == 0) ? -43+'px' : 0+'px','height': '230px','top': '0px'}">
                <td v-for="(item2,index2) in item1" :key="index2">
                  <table>
                    <tbody>
                      <tr>
                        <td><span>{{item2.productName}}</span></td>
                      </tr>
                      <tr class="tow">
                        <td><span>{{item2.standard}}</span></td>
                        <td><span>{{item2.unit}}</span></td>
                      </tr>
                      <tr class="tow">
                        <td style="width:100%"><span>{{item2.produceFactory}}</span></td>
                      </tr>
                      <tr class="tow">
                        <td><span>{{item2.productCode}}</span></td>
                        <td><span>{{personName}}</span></td>
                      </tr>
                      <tr class="tow">
                        <td><span style="font-size:16px!important;">{{item2.salePrice}}</span></td>
                        <td><span style="font-size:16px!important;">{{item2.memberPrice}}</span></td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '@/assets/scss/print.scss'
  import $ from 'jquery'

  export default {
    name: "printnoback",
    data() {
      return {
        printData: JSON.parse(this.$route.query.products),
        newPrintData: [],
        personName: "007",
      };
    },
    created:function(){
      this.initData();
    },
    mounted: function(){
      var len = Math.ceil(this.printData.length/21);
      for(var i=1; i<len; i++){
        $(".printDataHtml2").after("<div class='printDataHtml3'></div>");
      }
    },
    methods: {
      toList() {
        this.$router.push({
          name: 'List',
        })
      },
      initData: function() {
        let printData = this.printData;
        console.log(printData)
        let tdlength = printData.length;
        let trlength = Math.ceil(tdlength / 3);
        let store = [];
        $.each(printData, function(index, item) {
          var tr = Math.floor(index / 3)
          if (!store[tr]) {
            store[tr] = []
          }
          store[tr].push(item)
        })

        this.newPrintData = store;
      },
      startPrint: function() {
        document.close();
        window.print();
      }
    }
  }
</script>
<style lang="scss" scoped>
  @media screen {
    .bgPrintDataBoxPa {
      width: 1030px;
      margin: 0 auto;
    }

    .printDataHtml {
      position: absolute;
      top: 50px;
      z-index: 2;
    }
  }

  @media print {

    #uploadFile,
    .bgPrintDataBox,
    .printDataHtml2,
    .printDataHtml3 {
      display: none
    }

    .printDataHtml {
      position: absolute;
      top: -23px;
      z-index: 2;
    }
  }
</style>
